<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单的例子-注册</title>
		<style>
			/* 属性选择器 */
			/* 后代选择器 */
			form input[type=text],form input[type=password] {
				/* 取消边框 */
				border: none;
				/* 取消轮廓 */
				outline: none;
				/* 下边框 */
				border-bottom: 1px solid darkgray;
			}
			
			/* 兄弟选择器 */
			form~input[type=text] {
				outline:none;
				border: 1px solid lightgray;
			}
			
			/* focus 焦点 鼠标点上去的时候 */
			form~input[type="text"]:focus {
				outline: none;
				border:1px solid #00FFFF;
			}
			.button {
				/* 设置成行级显示 */
				display: inline-block;
				color: white;
				background-color: red;
				/* 扁平化设置 */
				border: none;
				/* 一般浏览器要换成行级标签才能直接改标签大小 */
				width: 120px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<figure>
			<img src="../1.jpg" alt="" />
			<figcaption>图片说明</figcaption>
		</figure>
		<form action="../bgm.mp3" method="post">
			<fieldset>
				<legend>用户注册</legend>
				<p>
					用户名:<input type="text" name="username" size="20" placeholder="用户名有6-20个字符构成" required/>
				</p>
				<p>
					密码：<input type="password" name="password" required/>
				</p>
				<p>
					确认密码：<input type="password" name="repassword" required"/>
				</p>
				<p>
					性别: <input type="radio" name="sex" value="1" checked/>男 
					 <input type="radio" name="sex" value="0"/>女
				</p>
				<p>
					爱好：<br>
					<input type="checkbox" name="fav" value="吃" checked/>吃
					<input type="checkbox" name="fav" value="喝" />喝
					<input type="checkbox" name="fav" value="漂" />漂
					<input type="checkbox" name="fav" value="赌" />赌
				</p>
					省份：
				<select name="province">
					<option value="110000">北京</option>
					<option value="120000">天津</option>
					<option value="310000">上海</option>
					<option value="500000">重庆</option>
					<option value="510000" selected>四川省</option>
				</select>
				<p>
					生日
					<input type="date" name="birthday"/>
				</p>
				<p>
					邮箱：
					<input type="emali" name="email" required/>
				</p>
				<p>
					自我介绍：<br>
					<textarea rows="10" cols="30" name="intro">
					</textarea>
				</p>
				<p>
					<input class="button" type="submit" value="确认注册"/>
					<input class="button" type="reset" value="重置" />
				</p>
				
			</fieldset>
		</form>
		<input type="text"/>
		<!-- <iframe src="http://www.baidu.com" width="300"></iframe> -->
	</body>
	
</html>
